<template>
  <div class="dataInspect">
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
          <n-tab :options="tabOptions" @click="tabCheckHandler"/>
          <div class="ha-top">
            <el-select v-if="verifyTimesList && verifyTimesList.length > 0" v-model="selectFormModel.verifyTimes"
                       style="margin-right: 10px;" size="mini" @change="onVerifyTimesChange">
              <el-option
                  v-for="item in verifyTimesList"
                  :key="item.verifyTimes"
                  :label="item.verifyTimeLabel"
                  :value="item.verifyTimes">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="background-color: #5b9a8e;font-size: 16px;padding: 5px 0">
          核查进度信息：共{{userJudgeTaskStats.total}}条对象，已核查{{userJudgeTaskStats.doneCount}}条，待核查{{userJudgeTaskStats.todoCount}}条，核查进度{{userJudgeTaskStats.finishRatio}}%。
        </div>
        <div style="margin-bottom: 5px">
          <span style="color: red; font-size: 14px">
            *核查结果判定规则：错误指标调查数量占核查的调查指标总数的比例大于等于{{userJudgeTaskStats.errorRate}}%的，判定不合格。
          </span>
        </div>
        <div class="ha-top">
          <el-form :inline="true" :model="selectFormModel" class="demo-form-inline">
            <el-form-item label="行政区划：">
              <el-select v-model="selectFormModel.areaCode" clearable
                         style="margin-right: 10px;" size="mini" @change="onSearch">
                <el-option
                    v-for="item in subAreaList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型：">
              <el-select v-model="selectFormModel.categoryId" clearable
                         style="margin-right: 10px;" size="mini" @change="onSearch">
                <el-option
                    v-for="item in minCategoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否已核查：">
              <el-select v-model="selectFormModel.judgeState" clearable
                         style="margin-right: 10px;" size="mini" @change="onSearch">
                <el-option
                    v-for="item in commonYesNoList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否有标错：">
              <el-select v-model="selectFormModel.markState" clearable
                         style="margin-right: 10px;" size="mini" @change="onSearch">
                <el-option
                    v-for="item in commonYesNoList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                  size="mini"
                  v-model="selectFormModel.departName"
                  clearable
                  clear="onSearch"
                  @keyup.enter.native="onSearch"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
            <el-form-item class="data-query-button">
              <el-button size="small" plain @click="reportDialogVisible = true" :disabled="userJudgeTaskStats.reportState=='1'" type="primary">核查结果上报</el-button>
              <el-button size="small" plain @click="missDialogTableVisible = true" type="primary">查看对象遗漏列表</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-dialog
            title="是否上报"
            :visible.sync="reportDialogVisible"
            width="30%">
          <span style="color: red">上报后核查对象将不可再编辑，不可撤销，确认上报？</span><br>
          <span slot="footer" class="dialog-footer">
            <el-button @click="reportDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="reportJudgeResult" :loading="reportLoading">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="查看填报对象遗漏列表" width="80%" custom-class="parent-dialog" :visible.sync="missDialogTableVisible">
            <judge-mark-replenish :work-id="selectFormModel.workId" :verify-times="selectFormModel.verifyTimes"
                                  :add-tag="userJudgeTaskStats.reportState=='1'"></judge-mark-replenish>
        </el-dialog>
        <data-table
            :api="selectJudgeTaskList"
            ref="dataTable"
            :options="options"
            :columns="columns"
            :operates="operates"
            :query="selectFormModel"
        ></data-table>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import NTitle from "@/components/NTitle.vue";
import {selectJudgeTaskList,
  queryUserTaskStats,
  updateJudgeTaskReportState,
} from '@/api/verifyJudgeMark';
import {getMinCategory} from '@/api/investCategory';

import NTab from "@/components/NTab.vue";
import JudgeMarkReplenish from "@/components/verify/JudgeMarkReplenish.vue";
import {queryVerifyWorkList, queryWorkVerifyTimes} from "@/api/verifyWork";
import {queryUserSubArea} from "@/api/area";
import storeUtils from "@/utils/storeUtils";
import {Message} from "element-ui";

@Component({
  methods: {selectJudgeTaskList},
  components: {JudgeMarkReplenish, NTab, NTitle, DataTable}
})
export default class judgeMark extends Vue {
  reportDialogVisible = false;
  reportLoading = false;
  @Ref('dataTable') private dataTable: any;
  subAreaList:any = [];
  minCategoryList:any = [];
  tabOptions: any = [];
  verifyTimesList:any = [];
  missDialogTableVisible:any = false;
  missFormModel:any = {
    areaCode:'',
    categoryId:''
  }
  commonYesNoList:any = [
    {
      code:'0',
      name:'否'
    },
    {
      code:'1',
      name:'是'
    }
  ]
  userJudgeTaskStats:any = {
    total:0,
    doneCount:0,
    todoCount:0,
    finishRatio:'0.00',
    reportState:'0',
    errorRate:'5'
  };
  selectFormModel: any = {
    workId: 15,
    verifyTimes: 2,
    areaCode: undefined,
    categoryId:undefined,
    judgeState:undefined,
    markState:undefined,
  };
  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: false, // 是否支持列表项选中功能
  };
  columns: any = [
    {label: '名称', prop: 'departName'},
    {label: '区县', prop: 'countyName'},
    {label: '类型', prop: 'categoryName'},
    {label: '地址', prop: 'departAddr'},
    {label: '是否已核查', prop: 'judgeState', render: function (createElement, context) {
        if (context.row.judgeState == '1') {
          return createElement('span', ['是']);
        } else {
          return createElement('span', ['否']);
        }
      }
    },
    {label: '是否有标错', prop: 'markState', render: function (createElement, context) {
        if (context.row.markState == '1') {
          return createElement('span', ['是']);
        } else {
          return createElement('span', ['否']);
        }
      }}
  ];
  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '核查',
        type: 'text',
        icon: 'el-icon-edit',
        plain: true,
        disabled: (index: any, row: any) => {
          return row.reportState == '1' || row.judgeState == '1';
        },
        method: (index: any, row: any) => {
          this.$router.push({
            path: '/verify/judgeMarkDetail',
            query: {taskId: row.id, dataId:row.dataCommonId, verifyId:row.verifyId, workId: row.workId, structureId:row.structureId, editTag: '1'}
          });
        }
      },
      {
        label: '查看',
        type: 'text',
        icon: 'el-icon-view',
        plain: true,
        disabled: (index: any, row: any) => {
          return false;
        },
        method: (index: any, row: any) => {
          this.$router.push({
            path: '/verify/judgeMarkDetail',
            query: {taskId: row.id, dataId:row.dataCommonId, verifyId:row.verifyId, workId: row.workId, structureId:row.structureId, editTag: '0'}
          });
        }
      }
    ]
  };


  //调查任务切换
  tabCheckHandler(data) {
    this.queryVerifyTimes(data.item.id);
    this.selectFormModel.workId = data.item.id;
  }
  //查询调查任务抽样次数
  queryVerifyTimes(workId) {
    queryWorkVerifyTimes({workId: workId}).then(res => {
      if (res.data) {
        this.verifyTimesList = res.data
        this.selectFormModel.verifyTimes = res.data[0].verifyTimes
        this.getUserTaskStats()
        this.onSearch();
      }
    })
  }
  //筛选次数修改
  onVerifyTimesChange(): void {
    this.getUserTaskStats()
    this.onSearch();
  }
  onSearch(): void {
    this.dataTable.refresh();
  }

  //查询用户核查任务情况统计
  getUserTaskStats() {
    queryUserTaskStats({workId:this.selectFormModel.workId, verifyTimes:this.selectFormModel.verifyTimes}).then(res=> {
      if(res.data) {
        this.userJudgeTaskStats = res.data
      }
    })
  }

  //上报核查结果
  reportJudgeResult() {
    this.reportLoading = true;
    updateJudgeTaskReportState({workId:this.selectFormModel.workId, verifyTimes:this.selectFormModel.verifyTimes}).then(res=> {
      Message.success("上报成功")
      this.reportDialogVisible = false
    }).catch(err=>{
      Message.error("上报失败");
    }).finally(()=>{
      this.reportLoading = false;
    })
  }

  mounted() {
    //调查任务
    queryVerifyWorkList().then(res => {
      if(res.data) {
        res.data.forEach(wd => {
          this.tabOptions.push({label: wd.name, id: wd.id});
        })
        this.tabCheckHandler({item: this.tabOptions[0]});
      }
    });
    //获取调查类别列表
    getMinCategory().then(res=> {
      if (res.data) {
        this.minCategoryList = res.data
      }
    });

    var dept = storeUtils.getStorageS(storeUtils.CONST.departInfo)
    if(dept) {
      if (dept.areaLevel == '2') {
        this.subAreaList.push({code:dept.areaCode, name:dept.areaName})
        this.selectFormModel.areaCode=dept.areaCode
      } else if (dept.areaLevel == '1' || dept.areaLevel == '0') {
        //获取登录人的下级区域列表
        queryUserSubArea().then(res=> {
          if (res.data) {
            this.subAreaList = res.data
          }
        })
      }
    }
  }
  activated(){
    this.onSearch()
  }
}
</script>
<style lang="scss" scoped>
.verifyDataList {
  display: flex;
  gap: 10px;

  .ha-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .radio-t {
      display: flex;
      align-items: center;
      gap: 6px;

      span {
        font-size: 14px;
      }
    }
  }
}
.data-query-button{
  position: absolute;
  right: 20px;
}
::v-deep .parent-dialog {
  z-index: 2000 !important;
  height: 80vh;
  overflow-y: auto;
}
</style>
